<script setup lang="ts">
import { ViewManage, ViewTree } from './components'
import type { Tree } from './components/ViewTree/ViewTree'

const modelType = ref('1')
const point = ref<Tree>()
const manageRef = ref<InstanceType<typeof ViewManage>>()

function onClickNode(o: Tree) {
  point.value = o
}
watchEffect(() => {
  manageRef.value?.getTableData(modelType.value, point.value?.id)
})
</script>

<template>
  <div
    class="width-fill height-fill padding-sm flex-direction relative box-border flex gap-sm container"
  >
    <ElForm inline>
      <ElFormItem
        label="选择应用模型"
        style="margin-bottom: 0"
      >
        <DictionaryPicker
          v-model="modelType"
          code="YING_YONG_MO_XING"
        />
      </ElFormItem>
    </ElForm>
    <BScrollbar>
      <div class="height-fill flex-fillRemaining align-center box-border flex gap-sm">
        <ViewTree :model-type="modelType" @click-node="onClickNode" />
        <ViewManage ref="manageRef" />
      </div>
    </BScrollbar>
  </div>
</template>
